<template>
  <div>
    <h1>namespaced:true</h1>
    <h3>state基本使用</h3>
    <div>{{ $store.state.app.appVal }}</div>
    <div>{{ appVal2 }}</div>
    <!-- <div>{{ userInfo }}</div> -->
    <h3>mutations基本使用</h3>
    <button @click="btnClick">修改state</button>
    <h3>getters基本使用</h3>
    <div>{{ $store.getters['app/getAppVal'] }}</div>
    <div>{{ getAppVal }}</div>
    <div>{{ $store.getters.getAppVal2 }}</div>
    <h3>actions基本使用</h3>
    <button @click="btnClick2">调用actions方法</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState('app', { appVal2: 'appVal' }),
    // ...mapGetters(['app/getAppVal'])
    // ...mapGetters({
    //   getAppVal: 'app/getAppVal'
    // })
    ...mapGetters('app', ['getAppVal'])
    // ...mapState({
    //   userInfo: state => {
    //     return state.user.userInfo
    //   }
    // })
  },
  methods: {
    // ...mapMutations(['app/setAppVal']),
    ...mapMutations('app', ['setAppVal']),
    // ...mapActions(['app/refreshAppVal']),
    ...mapActions('app', ['refreshAppVal']),
    btnClick () {
      //   this.$store.commit('app/setAppVal', Math.random() * 999)
      //   this['app/setAppVal'](Math.random() * 999)
      this.setAppVal(Math.random() * 999)
      //   window.console.log(this.getAppVal)
    },
    btnClick2 () {
      //   this.$store.dispatch('app/refreshAppVal')
      //   this['app/refreshAppVal']()
      this.refreshAppVal()
    }
  }
}
</script>
<style></style>
